<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片合成工具 v4.0</title>
<style>
body { font-family: Arial; margin:20px; }
input { margin-bottom:5px; }
button { margin-top:10px; }
#log { width:100%; height:150px; overflow-y:scroll; background:#f0f0f0; padding:10px; font-family:Consolas; margin-bottom:10px; }
#preview { display:block; margin-top:20px; border:1px solid #ccc; max-width:100%; }
</style>
</head>
<body>
<h2>图片合成工具 v4.0（内嵌图片版）</h2>
<label>宽度(px): <input type="number" id="width" value="800"></label>
<label>高度(px): <input type="number" id="height" value="600"></label>
<br>
<button onclick="generate()">生成图片</button>
<a id="downloadLink" style="display:none;" download="output.png">下载生成的图片</a>
<canvas id="canvas" style="display:none;"></canvas>
<div id="log"></div>
<img id="preview" alt="生成图片预览" />

<script>
// === 内嵌 Base64 图片 ===
const imageData = {
"lefttop.png": "",
"leftbottom.png": "",
"right.png": "",
"bottom.png": "",
"mid.png": "",
"righttop.png": ""
};

const imageFiles = Object.keys(imageData);

function log(msg){
    const logDiv = document.getElementById("log");
    logDiv.innerHTML += msg+"<br>";
    logDiv.scrollTop = logDiv.scrollHeight;
}

function loadImage(src){
    return new Promise((resolve,reject)=>{
        const img = new Image();
        img.onload = ()=>resolve(img);
        img.onerror = ()=>reject(new Error("无法加载图片"));
        img.src = src;
    });
}

async function generate(){
    log("✅ 开始生成图片...");
    const width=parseInt(document.getElementById("width").value);
    const height=parseInt(document.getElementById("height").value);
    if(isNaN(width)||isNaN(height)||width<=0||height<=0){ alert("请输入有效宽高"); return; }

    const canvas=document.getElementById("canvas");
    canvas.width=width; canvas.height=height;
    const ctx=canvas.getContext("2d");
    ctx.clearRect(0,0,width,height);

    const loadedImages={};
    for(let name of imageFiles){
        try{
            loadedImages[name]=await loadImage(imageData[name]);
            log(`📂 已加载 ${name}`);
        }catch(e){
            log(`⚠️ ${name} 加载失败`);
        }
    }

    drawImages(width,height,ctx,loadedImages);
}

function drawImages(width,height,ctx,imgs){
    const right=imgs["right.png"];
    const bottom=imgs["bottom.png"];
    const scale=Math.min(height/right.height, (0.9*width)/bottom.width);
    log(`📏 缩放比例：${scale.toFixed(3)}`);

    for(let key in imgs){
        const img=imgs[key];
        img.scaledWidth=img.width*scale;
        img.scaledHeight=img.height*scale;
    }

    const positions={
        "lefttop.png":[0.05*width, height/2 - imgs["right.png"].scaledHeight/2],
        "leftbottom.png":[0.05*width, 2*height/3 - imgs["leftbottom.png"].scaledHeight/2],
        "right.png":[width-imgs["right.png"].scaledWidth, height/2 - imgs["right.png"].scaledHeight/2],
        "bottom.png":[width/2 - imgs["bottom.png"].scaledWidth/2, height - imgs["bottom.png"].scaledHeight],
        "righttop.png":[width-imgs["right.png"].scaledWidth - imgs["righttop.png"].scaledWidth, height/2 - imgs["right.png"].scaledHeight/2],
        "mid.png":[width/2 - imgs["mid.png"].scaledWidth/2, height/2 - imgs["mid.png"].scaledHeight/2]
    };

    for(let key in positions){
        if(imgs[key]){
            const [x,y]=positions[key];
            ctx.drawImage(imgs[key], x, y, imgs[key].scaledWidth, imgs[key].scaledHeight);
            log(`✅ 放置 ${key} 于 (${Math.round(x)},${Math.round(y)})`);
        }
    }

    const dataURL=canvas.toDataURL("image/png");
    const preview=document.getElementById("preview");
    preview.src=dataURL;

    const downloadLink=document.getElementById("downloadLink");
    downloadLink.href=dataURL;
    downloadLink.style.display="inline";
    downloadLink.textContent="下载生成的图片";
    log("🎨 合成完成！");
}
</script>
</body>
</html>
